<template>
  <div class="category">
    <div class="ctitle">
      <div class="cp">
        <img src="../../assets/image/x_miniprogram_dm.png" alt />
      </div>
      <div class="csearch">
        <img class="csearch-pic" src="../../assets/image/search.png" alt />
        <input type="text" v-model="data" placeholder="按内容进行搜索" @keydown.enter="search" />
      </div>
    </div>
    <div class="con">
      <div class="con-l">
        <ul class="con-list">
          <li
            @click="showlist(index)"
            v-for="(item,index) in gcates"
            :key="item.id"
          >{{item.catename}}</li>
        </ul>
      </div>
      <div class="con-r">
        <template v-for="(item,index) in gcates">
          <div class="con-rone" v-if="isaaa==index" :key="item.id">
            <div class="con-rone-tit">{{item.catename}}</div>
            <div class="con-rone-con">
              <div
                v-for="(i) in item.children"
                :key="i.id"
                @click="getgoodlists(i.id)"
                class="con-rone-conbox"
              >
                <div class="crc-pic">
                  <img :src="$pregImg+i.img" alt />
                </div>
                <p>{{i.catename}}</p>
              </div>
            </div>
          </div>
        </template>
      </div>
    </div>
  </div>
</template>

<script>
import { getCates, getgoodlist } from "../../request/api";
export default {
  data() {
    return {
      gcates: [],
      isnum: 0,
      isaaa: 0,
      isyes: true,
      data: ""
    };
  },
  mounted() {
    getCates().then(res => {
      console.log(res);
      this.gcates = res.list;
      // console.log(this.gcates);
    });
  },
  methods: {
    showlist(i) {
      console.log(i);
      this.isaaa = i;
    },
    getgoodlists(id){
      let obj={
        cateid:id,
        page:1,
        size:3,
        type:2
      }
      getgoodlist(obj).then(res=>{
        // console.log(res.list);
        this.$router.push(`/list?id=${JSON.stringify(res.list.goodData)}`)
      })
    },
    search(){
      this.$router.push(`/search?keywords=${this.data}`)
    }
  }
};
</script>

<style scoped>
.category {
  width: 100vw;
  height: 100vh;
}
.ctitle {
  width: 100%;
  height: 1.4rem;
  background-image: linear-gradient(180deg, #ff6040 0%, #ff8a80 100%);
}
.ctitle .cp {
  width: 100%;
  height: 0.88rem;
}
.ctitle .cp img {
  width: 100%;
  height: 100%;
}
.ctitle .csearch {
  margin: 0 auto;
  width: 3.55rem;
  height: 0.52rem;
  display: flex;
  align-items: center;
  position: relative;
}
.csearch input {
  width: 3.55rem;
  height: 0.32rem;
  padding-left: 0.34rem;
  font-size: 0.14rem;
  color: #999999;
}
.csearch-pic {
  position: absolute;
  left: 0.12rem;
  top: 0.18rem;
  width: 0.16rem;
  height: 0.16rem;
}
.con {
  display: flex;
  width: 100%;
  height: calc(100vh - 1.89rem);
}
.con .con-l {
  width: 148px;
  background-color: #fff;
  overflow-y: auto;
  overflow-x: hidden;
}
.con .con-r {
  flex: 1;
  background-color: #f2efef;
  overflow-x: hidden;
  overflow-y: auto;
  padding: 0.1rem 0.14rem;
}
.con-list li {
  height: 0.6rem;
  line-height: 0.6rem;
  text-align: center;
}
.con-rone {
  background-color: #fff;
  width: 100%;
  height: 2.18rem;
  display: flex;
  flex-direction: column;
  margin-bottom: 0.1rem;
  padding-top: 0.1rem;
}
.con-rone-con {
  display: flex;
  flex-wrap: wrap;
  width: 100%;
  /* padding: 0 .1rem; */
}
.con-rone-conbox {
  display: flex;
  flex-direction: column;
  margin: 0.06rem 0.06rem;
}
.crc-pic img {
  width: 0.64rem;
  height: 0.64rem;
}
.con-rone-tit {
  font-size: 0.16rem;
  padding-left: 0.1rem;
}
</style>

